<template>
  <div class="oe-statistics-analysis">
    <div class="oe-statistics-input">
      考试时间：
      <span class="oe-statistics-timer">
        <a-date-picker
          :disabledDate="disabledStartDate"
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          v-model="startValue"
          placeholder="开始时间"
          @openChange="handleStartOpenChange"
        />
        至
        <a-date-picker
          :disabledDate="disabledEndDate"
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="结束时间"
          v-model="endValue"
          :open="endOpen"
          @openChange="handleEndOpenChange"
        />
      </span>
      考试分类：
      <a-select
        showSearch
        :value="school"
        placeholder="请选择考试分类"
        style="width: 200px"
        allowClear
        :defaultActiveFirstOption="false"
        :filterOption="false"
        @search="handleSearch"
        @change="handleChange"
        notFoundContent="无数据"
      >
        <a-select-option v-for="d in schoolList" :key="d.value">{{ d.text }}</a-select-option>
      </a-select>
      考试名称：
      <a-input placeholder="请输入考试名称" v-model="examName"></a-input>
    </div>
    <div class="oe-statistics-table">
      <a-table :columns="columns" :dataSource="dataList" :rowSelection="rowSelection" :pagination="pagination">
        <span slot="operation" slot-scope="text, record">
          <router-link :to="{ name: 'detailAnalysis', params: { examid: record.number } }">
            <a-tooltip placement="bottom">
              <template slot="title">
                <span>查看统计详情</span>
              </template>
              <i class="iconfont icon-chakan"></i>
            </a-tooltip>
          </router-link>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};
export default {
  name: 'statisticsAnalysis',
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
      school: undefined,
      //考试名称
      examName: '',
      // 分页配置
      pagination: {
        // pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        // showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          //   this.onClick(current, pageSize)
        },
        onChange: (current, pageSize) => {
          console.log('current', current);
          console.log('curpageSizerent', pageSize);
          //   this.onClick(current, pageSize)
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          console.log(props);
          return props.value + '条/页';
        },
        // itemRender(current, type, originalElement) {
        //   if (type === 'prev') {
        //     return <a class="ant-prev">上一页</a>;
        //   } else if (type === 'next') {
        //     return <a class="ant-next">下一页</a>;
        //   }
        //   return originalElement;
        // },
        current: 1,
        pageSize: 10
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '10%',
          key: 'number'
        },
        {
          title: '考试名称',
          dataIndex: 'name',
          width: '10%',
          key: 'name'
        },
        {
          title: '考试分类',
          dataIndex: 'bitch',
          width: '11%',
          key: 'bitch'
        },
        {
          title: '考试时间',
          dataIndex: 'time',
          width: '13%',
          key: 'time'
        },
        {
          title: '应考人数',
          dataIndex: 'candidateNumber',
          width: '13%',
          key: 'candidateNumber'
        },
        {
          title: '实考人数',
          dataIndex: 'realNumber',
          width: '10%',
          key: 'realNumber'
        },
        {
          title: '及格人数',
          dataIndex: 'failNumber',
          width: '10%',
          key: 'failNumber'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '10%',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 数据列表
      dataList: [
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        },
        {
          number: '111',
          name: '黄鑫',
          bitch: '第一类',
          time: '2020-10-20 20:20',
          candidateNumber: 100,
          realNumber: 55,
          failNumber: 55
        }
      ]
    };
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 学校搜索
    handleSearch(val) {
      console.log('handleSchoolSearch', val);
    },
    // 改变选择的学校
    handleChange(val) {
      console.log('handleSchoolChange', val);
      this.school = val;
    }
  }
};
</script>
